import 'package:flutter/material.dart';

/// packages
import 'package:provider/provider.dart';

import 'counter_view_model.dart';

class CounterOperationView extends StatelessWidget {
  const CounterOperationView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.black,
        child: const Icon(Icons.arrow_downward),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      body: const SafeArea(
        child: CounterOperation(),
      ),
    );
  }
}

class CounterOperation extends StatelessWidget {
  const CounterOperation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              /// Provider
              Consumer<CounterViewModel>(
                builder: (_, CounterViewModel counterViewModel, child) {
                  int _count = counterViewModel.count;
                  return Text(
                    _count.toString(),
                    style: const TextStyle(
                      fontSize: 48.0,
                      fontWeight: FontWeight.bold,
                    ),
                  );
                },
              ),
              Row(
                children: [
                  CounterButton(
                    icon: const Icon(Icons.add),
                    onPressed: () {
                      /// Provider
                      Provider.of<CounterViewModel>(context, listen: false)
                          .increment();
                    },
                  ),
                  CounterButton(
                    icon: const Icon(Icons.remove),
                    onPressed: () {
                      /// Provider
                      Provider.of<CounterViewModel>(context, listen: false)
                          .decrement();
                    },
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class CounterButton extends StatelessWidget {
  const CounterButton({Key? key, required this.icon, required this.onPressed})
      : super(key: key);

  final Widget icon;
  final Function() onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 64.0,
      width: 64.0,
      margin: const EdgeInsets.all(8.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [
              Color(0xFFE3B2CB),
              Color(0xFFE3B2CB),
            ],
          ),
          borderRadius: BorderRadius.circular(24.0),
        ),
        child: Material(
          color: Colors.transparent,
          child: IconButton(
            splashColor: Colors.black26,
            icon: icon,
            onPressed: onPressed,
          ),
        ),
      ),
    );
  }
}
